<template>
  <div id="app">
    <!-- 5. 路由出口 -->
    <transition mode="out-in" :name="transitionName" >
      <router-view class="child-box"></router-view>
    </transition>
  </div>
</template>

<script>
export default {
  data(){
    return {
      transitionName:"turn-on"
    }
  },
  watch:{
      '$route':function(to,from){
         if (parseInt(to.query._t) < parseInt(from.query._t)) {
              this.transitionName = 'turn-off';
          } else {
              this.transitionName = 'turn-on';
          }
      }
    },
}
</script>


<style lang="scss" scoped>
  
  @keyframes  turnon-enter{
      from{opacity: 0;transform: translateY(10%)}
      to{opacity: 1;transform: translateY(0%)}
  }
  @keyframes  turnon-leave{
      from{opacity: 1;transform: translateY(0%)}
      to{opacity: 0;transform: translateY(10%)}
  }

  @keyframes  turnoff-enter{
      from{opacity: 0;transform: translateY(10%)}
      to{opacity: 1;transform: translateY(0%)}
  }
  @keyframes  turnoff-leave{
      from{opacity: 1;transform: translateY(0%)}
      to{opacity: 0;transform: translateY(10%)}
  }

  .turn-on-enter-active{
    animation: turnon-enter .4s;
  }
  .turn-on-leave-active{
    animation: turnon-leave .4s;
  }

  .turn-off-enter-active{
    animation: turnoff-enter .4s;
  }
  .turn-off-leave-active{
    animation: turnoff-leave .4s;
  }
</style>
